<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .case1 > img:last-child {
        user-select: none;
        -webkit-user-select: none;
      }
      .case2 > li{
        user-select: all;
      }
      .case3::selection {
        color: red;
        background: rgb(164, 164, 221);
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="">上一篇</a>
      <a href="">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>user-select</dt>
        <dd>
          <ul>
            <li>auto，初始值</li>
            <li>text，可以选择图文</li>
            <li>none，不能选择</li>
            <li>all，一定选择全部（不是支持所有类型的选择的意思）</li>
            <li>contain，没有任何浏览器支持，请无视</li>
          </ul>
        </dd>
        <dd>
          <h4>图片选择优化，令其不可选择（常用）</h4>
          <p><i>下图第二张设置了不可选择</i></p>
          <div class="case1">
            <img src="../../Source/pic-transparent.png" width="100px" />
            <img src="../../Source/pic-transparent.png" width="100px" />
          </div>
        </dd>
        <dd>
          <h4>全部选择</h4>
          <p><i>下方列表设置了all</i></p>
          <ul class="case2">
            <li>
              <img src="../../Source/pic-transparent.png" width="100px" />
              <span>这里是一段描述</span>
            </li>
            <li>
              <img src="../../Source/pic-transparent.png" width="100px" />
              <span>这里是一段描述</span>
            </li>
            <li>
              <img src="../../Source/pic-transparent.png" width="100px" />
              <span>这里是一段描述</span>
            </li>
          </ul>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>user-select的一些细节</dt>
        <dd>
            <h4>无继承性</h4>
            <p><i>user-select没有继承性，但有以下特性</i></p>
            <p>1、默认值为auto，::before/::after默认值为none，也就是永远不会被选中</p>
            <p>2、auto的情况：父亲为all，则孩子为all；父亲为none，则孩子为none</p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>::section改变被选中文字的颜色</dt>
        <div class="case3">选我试试，我会变红哦</div>
        支持的属性中，color、background、text-shadow支持较好。
        <pre><code>.case3::selection {
  color: red;
  background: rgb(164, 164, 221);
}</code></pre>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
